<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>园区态势</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
        }

        .main-container {
            width: 1200px;
            height: 1100px;
            background: transparent;
            border: 2px solid #87ceeb;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }

        /* 关闭图标 */
        .close-icon {
            position: absolute;
            left: 51px;
            top: 133px;
            width: 29px;
            height: 29px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .close-icon:hover {
            transform: rotate(90deg);
            background-color: rgba(129, 217, 230, 0.8);
        }

        .close-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 四个导航箭头图标 - 根据新的参考信息调整位置 */
        .nav-icon-1 {
            position: absolute;
            left: 71px;
            top: 404px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }
        .nav-icon-2 {
            position: absolute;
            left: 96px;
            top: 404px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }
        .nav-icon-3 {
            position: absolute;
            left: 96px;
            top: 404px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }
        
        .nav-icon-4 {
            position: absolute;
            left: 80px;
            top: 404px;
            width: 18px;
            height: 18px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }
        
        .nav-icon-1:hover,
        .nav-icon-2:hover,
        .nav-icon-3:hover,
        .nav-icon-4:hover {
            transform: translateX(3px);
            background-color: rgba(129, 217, 230, 0.8);
        }
        
        .nav-icon-1 img,
        .nav-icon-2 img,
        .nav-icon-3 img,
        .nav-icon-4 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
   
        /* 五个小图标 */
        .small-icon-1 {
            position: absolute;
            left: 434px;
            top: 139px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }
        .small-icon-2 {
            position: absolute;
            left: 450px;
            top: 139px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-3 {
            position: absolute;
            left: 466px;
            top: 139px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-4 {
            position: absolute;
            left: 482px;
            top: 139px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-5 {
            position: absolute;
            left: 496px;
            top: 139px;
            width: 16px;
            height: 17px;
            background-color: rgba(129,217,230,1);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            z-index: 10;
        }

        .small-icon-1:hover,
        .small-icon-2:hover,
        .small-icon-3:hover,
        .small-icon-4:hover,
        .small-icon-5:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
        }

        .small-icon-1 img,
        .small-icon-2 img,
        .small-icon-3 img,
        .small-icon-4 img,
        .small-icon-5 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 矩形组件1 - 标题栏 */
        .rect-component-1 {
            position: absolute;
            left: 51px;
            top: 130px;
            width: 353px;
            height: 32px;
            line-height: 28px;
            background: linear-gradient(90deg, rgba(11,70,101,1) 0%,rgba(58,183,219,0.21) 50%,rgba(255,255,255,0) 100%);
            color: rgba(129,217,230,1);
            font-size: 20px;
            text-align: left;
            font-family: PingFangSC-regular;
            transition: all 0.3s ease;
            z-index: 5;
        }

        .rect-component-1:hover {
            background: linear-gradient(90deg, rgba(11, 70, 101, 1) 0%, rgba(58, 183, 219, 0.31) 50%, rgba(255, 255, 255, 0) 100%);
        }

        /* 矩形组件2 - 背景容器 */
        .rect-component-2 {
            position: absolute;
            left: 54px;
            top: 161px;
            width: 459px;
            height: 263px;
            line-height: 20px;
            line-height: 20px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(58,183,219,0.21) 0%,rgba(58,183,183,0) 100%);
            color: rgba(16,16,16,1);
            font-size: 14px;
            text-align: center;
            box-shadow: 1px 1px 1px 1px rgba(129,217,230,1);
            font-family: PingFangSC-regular;
            padding: 20px;
            border-radius: 8px;
            transition: all 0.3s ease;
            z-index: 1;
        }

        .rect-component-2:hover {
            box-shadow: 2px 2px 3px 2px rgba(129, 217, 230, 1);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(58, 183, 219, 0.31) 0%, rgba(58, 183, 183, 0) 100%);
        }

        /* 线条组件1 */
        .line-component-1 {
            position: absolute;
            left: 143px;
            top: 413px;
            width: 361px;
            height: 1px;
            background-color: rgba(255,255,255,1);
            border: 1px solid rgba(129,217,230,1);
            transition: all 0.3s ease;
            z-index: 8;
        }

        .line-component-1:hover {
            background-color: rgba(129, 217, 230, 0.8);
            border-color: rgba(129, 217, 230, 1);
            height: 2px;
        }

        /* 线条组件2 */
        .line-component-2 {
            position: absolute;
            left: 118px;
            top: 421px;
            width: 361px;
            height: 1px;
            background-color: rgba(255,255,255,1);
            border: 1px solid rgba(129,217,230,1);
            transition: all 0.3s ease;
            z-index: 8;
        }

        .line-component-2:hover {
            background-color: rgba(129, 217, 230, 0.8);
            border-color: rgba(129, 217, 230, 1);
            height: 2px;
        }

        /* 六边形容器1 */
        .hexagon-container {
            position: absolute;
            left: 67px;
            top: 184px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 树状结构元素1 */
        .tree-structure {
            position: absolute;
            left: 78px;
            top: 193px;
            width: 29px;
            height: 30px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .tree-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .tree-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 六边形容器2 */
        .hexagon-container-2 {
            position: absolute;
            left: 221px;
            top: 184px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-2:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 朋友结构元素 */
        .friends-structure {
            position: absolute;
            left: 232px;
            top: 194px;
            width: 29px;
            height: 30px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .friends-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .friends-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 六边形容器3 */
        .hexagon-container-3 {
            position: absolute;
            left: 370px;
            top: 184px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-3:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 管理结构元素 */
        .manager-structure {
            position: absolute;
            left: 381px;
            top: 193px;
            width: 29px;
            height: 30px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .manager-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .manager-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 六边形容器4 */
        .hexagon-container-4 {
            position: absolute;
            left: 68px;
            top: 257px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-4:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 六边形容器5 */
        .hexagon-container-5 {
            position: absolute;
            left: 223px;
            top: 257px;
            width: 50px;
            height: 50px;
            line-height: 28px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            color: rgba(129,217,230,1);
            font-size: 20px;
            text-align: left;
            font-family: PingFangSC-regular;
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-5:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 六边形容器6 */
        .hexagon-container-6 {
            position: absolute;
            left: 371px;
            top: 257px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-6:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 时钟结构元素 */
        .clock-structure {
            position: absolute;
            left: 78px;
            top: 267px;
            width: 29px;
            height: 30px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .clock-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .clock-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 待办结构元素 */
        .todo-structure {
            position: absolute;
            left: 233px;
            top: 267px;
            width: 29px;
            height: 30px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .todo-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .todo-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 出租车结构元素 */
        .taxi-structure {
            position: absolute;
            left: 382px;
            top: 266px;
            width: 28px;
            height: 28px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .taxi-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .taxi-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 新增的六边形容器7 */
        .hexagon-container-7 {
            position: absolute;
            left: 68px;
            top: 334px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-7:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 新增的六边形容器8 */
        .hexagon-container-8 {
            position: absolute;
            left: 223px;
            top: 334px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-8:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 新增的六边形容器9 */
        .hexagon-container-9 {
            position: absolute;
            left: 371px;
            top: 334px;
            width: 50px;
            height: 50px;
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0) 100%);
            border: 1px solid rgba(187,187,187,1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hexagon-container-9:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 70, 101, 0.3);
            background: radial-gradient(0.5% 0.5% at 50% 50%, rgba(11,70,101,1) 0%,rgba(58,183,219,0.3) 100%);
        }

        /* 新增的摄像头结构元素 */
        .webcam-structure {
            position: absolute;
            left: 78px;
            top: 344px;
            width: 28px;
            height: 28px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .webcam-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .webcam-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 新增的警告结构元素 */
        .warning-structure {
            position: absolute;
            left: 236px;
            top: 345px;
            width: 24px;
            height: 24px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .warning-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .warning-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 新增的平衡结构元素 */
        .balance-structure {
            position: absolute;
            left: 382px;
            top: 344px;
            width: 29px;
            height: 30px;
            background-color: rgba(129,217,230,1);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
            box-shadow: 0 2px 8px rgba(129, 217, 230, 0.3);
        }

        .balance-structure:hover {
            transform: scale(1.1);
            background-color: rgba(129, 217, 230, 0.8);
            box-shadow: 0 4px 12px rgba(129, 217, 230, 0.5);
        }

        .balance-structure img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 文本标签组1 -  */
        .text-label-group-1-1 {
            position: absolute;
            left: 122px;
            top: 179px;
            width: 62px;
            height: 28px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-1-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        .text-label-group-1-2 {
            position: absolute;
            left: 122px;
            top: 205px;
            width: 60px;
            height: 25px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-1-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 文本标签组2 -  */
        .text-label-group-2-1 {
            position: absolute;
            left: 277px;
            top: 179px;
            width: 74px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-2-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        .text-label-group-2-2 {
            position: absolute;
            left: 277px;
            top: 205px;
            width: 62px;
            height: 25px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-2-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 文本标签组3  */
        .text-label-group-3-1 {
            position: absolute;
            left: 426px;
            top: 179px;
            width: 48px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-3-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        .text-label-group-3-2 {
            position: absolute;
            left: 426px;
            top: 205px;
            width: 60px;
            height: 25px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-3-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 文本标签组4  */
        .text-label-group-4-1 {
            position: absolute;
            left: 122px;
            top: 256px;
            width: 81px;
            height: 32px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-4-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        .text-label-group-4-2 {
            position: absolute;
            left: 122px;
            top: 282px;
            width: 60px;
            height: 25px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-4-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 文本标签组5  */
        .text-label-group-5-1 {
            position: absolute;
            left: 278px;
            top: 256px;
            width: 62px;
            height: 28px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-5-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

/* 新增的文本标签组5-2 - 第二行中间副标题 */
        .text-label-group-5-2 {
            position: absolute;
            left: 278px;
            top: 282px;
            width: 60px;
            height: 25px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-5-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 新增的文本标签组6-1 - 第二行右侧标题 */
        .text-label-group-6-1 {
            position: absolute;
            left: 426px;
            top: 256px;
            width: 48px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-6-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        /* 新增的文本标签组6-2 - 第二行右侧副标题 */
        .text-label-group-6-2 {
            position: absolute;
            left: 426px;
            top: 282px;
            width: 62px;
            height: 23px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-6-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 新增的文本标签组7-1 - 第三行左侧标题 */
        .text-label-group-7-1 {
            position: absolute;
            left: 122px;
            top: 333px;
            width: 81px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-7-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        /* 新增的文本标签组7-2 - 第三行左侧副标题 */
        .text-label-group-7-2 {
            position: absolute;
            left: 122px;
            top: 359px;
            width: 81px;
            height: 25px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-7-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 新增的文本标签组8-1 - 第三行中间标题 */
        .text-label-group-8-1 {
            position: absolute;
            left: 278px;
            top: 333px;
            width: 48px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-8-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        /* 新增的文本标签组8-2 - 第三行中间副标题 */
        .text-label-group-8-2 {
            position: absolute;
            left: 278px;
            top: 359px;
            width: 62px;
            height: 23px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-8-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 新增的文本标签组9-1 - 第三行右侧标题 */
        .text-label-group-9-1 {
            position: absolute;
            left: 426px;
            top: 333px;
            width: 48px;
            height: 30px;
            line-height: 28px;
            color: rgba(238,213,65,1);
            font-size: 20px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 5px rgba(238, 213, 65, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-9-1:hover {
            color: rgba(238, 213, 65, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 10px rgba(238, 213, 65, 0.6);
        }

        /* 新增的文本标签组9-2 - 第三行右侧副标题 */
        .text-label-group-9-2 {
            position: absolute;
            left: 426px;
            top: 359px;
            width: 74px;
            height: 24px;
            line-height: 23px;
            color: rgba(129,217,230,1);
            font-size: 16px;
            text-align: left;
            font-family: PMZDBiaoTi-regular, 'PingFangSC-regular', 'Microsoft YaHei', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 12;
            text-shadow: 0 0 3px rgba(129, 217, 230, 0.3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-label-group-9-2:hover {
            color: rgba(129, 217, 230, 0.8);
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(129, 217, 230, 0.6);
        }

        /* 响应式调整 */
        @media (max-width: 1250px) {
            .main-container {
                transform: scale(0.9);
            }
        }

        @media (max-width: 1100px) {
            .main-container {
                transform: scale(0.8);
            }
        }
    </style>
</head>
<body>
<div class="main-container">
    <!-- 发光效果 -->
    <div class="glow-effect"></div>

    <!-- 关闭图标 -->
    <div class="close-icon">
        <img src="https://sfile.chatglm.cn/chatglm4/0975be71-e4ca-4013-8f63-f85c63f62459.png"
             alt="关闭图标">
    </div>

    <!-- 矩形组件1 - 标题栏 -->
    <div class="rect-component-1">
        园区态势
    </div>

    <!-- 矩形组件2 - 背景容器 -->
    <div class="rect-component-2">
        <img src="https://sfile.chatglm.cn/chatglm4/e5e537e5-4a5c-4c76-910e-063411316d05.png"
             alt="矩形背景" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
    </div>

    <!-- 五个小图标 -->
    <div class="small-icon-1">
        <img src="https://sfile.chatglm.cn/chatglm4/0873705f-7fb8-4e51-9c02-84089d30230d.png"
             alt="小图标1">
    </div>
    <div class="small-icon-2">
        <img src="https://sfile.chatglm.cn/chatglm4/a8cf9d43-ee75-4dcb-a47a-144a8ba69eac.png"
             alt="小图标2">
    </div>
    <div class="small-icon-3">
        <img src="https://sfile.chatglm.cn/chatglm4/d96cb6da-589e-4c3b-a5b9-2c20d233cef5.png"
             alt="小图标3">
    </div>
    <div class="small-icon-4">
        <img src="https://sfile.chatglm.cn/chatglm4/91c859f0-49b1-48af-9417-6e39385a2f2a.png"
             alt="小图标4">
    </div>
    <div class="small-icon-5">
        <img src="https://sfile.chatglm.cn/chatglm4/37e7942f-90ba-4d4c-942d-489ab286b63b.png"
             alt="小图标5">
    </div>

    <!-- 四个导航箭头图标 - 更新为新图标和新位置 -->
    <div class="nav-icon-1">
        <img src="https://sfile.chatglm.cn/chatglm4/098e25d5-df71-454d-b5dd-bbbd795fa89f.png"
             alt="导航图标1">
    </div>
    <div class="nav-icon-2">
        <img src="https://sfile.chatglm.cn/chatglm4/d2398051-11dd-46c8-898a-e619bbdb3339.png"
             alt="导航图标2">
    </div>
    <div class="nav-icon-3">
        <img src="https://sfile.chatglm.cn/chatglm4/169ed0db-a09c-494c-948a-fe90ecc6fcb6.png"
             alt="导航图标3">
    </div>
    <div class="nav-icon-4">
        <img src="https://sfile.chatglm.cn/chatglm4/9d6fcc4c-d715-409a-8f73-b63517121d7e.png"
             alt="导航图标4">
    </div>

    <!-- 线条组件1 -->
    <div class="line-component-1"></div>

    <!-- 线条组件2 -->
    <div class="line-component-2"></div>

    <!-- 文本标签组1 - 第一行左侧 -->
    <div class="text-label-group-1-1">
        <img src="https://sfile.chatglm.cn/chatglm4/7f1d9a52-d6b2-49a7-8c7f-a84ccfe03c62.png"
             alt="文本标签1" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-1-2">
        <img src="https://sfile.chatglm.cn/chatglm4/1a83680c-7d87-49ac-bf4d-13ab97889ef3.png"
             alt="文本标签2" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组2 - 第一行右侧 -->
    <div class="text-label-group-2-1">
        <img src="https://sfile.chatglm.cn/chatglm4/c0271b20-d7ea-4de7-8840-cb88bb816d36.png"
             alt="文本标签3" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-2-2">
        <img src="https://sfile.chatglm.cn/chatglm4/cb880a0d-61f0-48c8-a8e0-9a6f16dca948.png"
             alt="文本标签4" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组3 - 第二行左侧 -->
    <div class="text-label-group-3-1">
        <img src="https://sfile.chatglm.cn/chatglm4/6ee6f089-e535-4ea8-800e-41076d0e939d.png"
             alt="文本标签5" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-3-2">
        <img src="https://sfile.chatglm.cn/chatglm4/d515d7d3-2886-408b-a74c-a31bff3591ab.png"
             alt="文本标签6" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组4 - 第二行中间 -->
    <div class="text-label-group-4-1">
        <img src="https://sfile.chatglm.cn/chatglm4/25437137-0574-4656-b6fe-eacb6f61f0fd.png"
             alt="文本标签7" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-4-2">
        <img src="https://sfile.chatglm.cn/chatglm4/d7a5cab8-6113-43f5-bd23-3013a794de40.png"
             alt="文本标签8" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

<!-- 文本标签组5 - 第二行中间 -->
    <div class="text-label-group-5-1">
        <img src="https://sfile.chatglm.cn/chatglm4/81621b19-0061-4d42-a60f-c9f5a386284f.png"
             alt="文本标签9" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-5-2">
        <img src="https://sfile.chatglm.cn/chatglm4/b056f7c7-0203-48ff-ace9-ef5ccee42082.png"
             alt="文本标签10" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组6 - 第二行右侧 -->
    <div class="text-label-group-6-1">
        <img src="https://sfile.chatglm.cn/chatglm4/7d33e82d-112d-4feb-8829-23463f0b2109.png"
             alt="文本标签11" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-6-2">
        <img src="https://sfile.chatglm.cn/chatglm4/4cc7310c-d803-45d8-877d-cefaeb89b188.png"
             alt="文本标签12" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组7 - 第三行左侧 -->
    <div class="text-label-group-7-1">
        <img src="https://sfile.chatglm.cn/chatglm4/d6aa8baa-502b-4d30-9fe7-24ce5200964f.png"
             alt="文本标签13" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-7-2">
        <img src="https://sfile.chatglm.cn/chatglm4/04b68da1-fcb6-4dc9-ac79-223337868431.png"
             alt="文本标签14" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组8 - 第三行中间 -->
    <div class="text-label-group-8-1">
        <img src="https://sfile.chatglm.cn/chatglm4/0e36d585-99b2-43d6-84fc-1080152dd39c.png"
             alt="文本标签15" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-8-2">
        <img src="https://sfile.chatglm.cn/chatglm4/22b9a5e1-64fb-4400-b028-9433071e391d.png"
             alt="文本标签16" style="width: 100%; height: 100%; object-fit: contain;">
    </div>

    <!-- 文本标签组9 - 第三行右侧 -->
    <div class="text-label-group-9-1">
        <img src="https://sfile.chatglm.cn/chatglm4/241178cf-bde1-466e-8d86-a096e1056a6d.png"
             alt="文本标签17" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    <div class="text-label-group-9-2">
        <img src="https://sfile.chatglm.cn/chatglm4/a599b0c3-8245-425e-86aa-66323317f2ed.png"
             alt="文本标签18" style="width: 100%; height: 100%; object-fit: contain;">
    </div>
    

    <!-- 第一行六边形和内部元素 -->
    <!-- 六边形容器1 -->
    <div class="hexagon-container">
        <img src="https://sfile.chatglm.cn/chatglm4/3808b042-0312-4dd5-9c3b-07a0354755a5.png"
             alt="六边形图标">
    </div>

    <!-- 树状结构元素1 -->
    <div class="tree-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/c5da7f03-51aa-459a-b378-a40c67dbabe0.png"
             alt="树状结构图标">
    </div>

    <!-- 六边形容器2 -->
    <div class="hexagon-container-2">
        <img src="https://sfile.chatglm.cn/chatglm4/94e70043-f7c1-4d1e-91ed-d635c82b3cd7.png"
             alt="六边形图标2">
    </div>

    <!-- 朋友结构元素 -->
    <div class="friends-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/2ba3116b-c768-4f2e-bc4c-da44177f2404.png"
             alt="朋友结构图标">
    </div>

    <!-- 六边形容器3 -->
    <div class="hexagon-container-3">
        <img src="https://sfile.chatglm.cn/chatglm4/f8d5adcd-6610-4e33-b3bb-c9bbe46bc775.png"
             alt="六边形图标3">
    </div>

    <!-- 管理结构元素 -->
    <div class="manager-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/5060f6cf-a49f-419f-8da4-91cc407ed9a9.png"
             alt="管理结构图标">
    </div>

    <!-- 第二行六边形和内部元素 -->
    <!-- 六边形容器4 -->
    <div class="hexagon-container-4">
        <img src="https://sfile.chatglm.cn/chatglm4/38be007e-cbd8-40b9-a985-29048c6a8a08.png"
             alt="六边形图标4">
    </div>

    <!-- 时钟结构元素 -->
    <div class="clock-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/37057b28-ccef-4ce1-846d-e6ab42abd24c.png"
             alt="时钟结构图标">
    </div>

    <!-- 六边形容器5 -->
    <div class="hexagon-container-5">
        <img src="https://sfile.chatglm.cn/chatglm4/12ac2c81-b70a-48bd-b1b6-6fc81a7c46f9.png"
             alt="六边形图标5">
    </div>

    <!-- 待办结构元素 -->
    <div class="todo-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/60f9520e-1ea5-4c3e-8576-2b3c40d3de30.png"
             alt="待办结构图标">
    </div>

    <!-- 六边形容器6 -->
    <div class="hexagon-container-6">
        <img src="https://sfile.chatglm.cn/chatglm4/9d12a827-09b4-464f-a778-9329c219aeda.png"
             alt="六边形图标6">
    </div>

    <!-- 出租车结构元素 -->
    <div class="taxi-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/8ad3e546-6f1b-45a3-988f-528f510e3bcd.png"
             alt="出租车结构图标">
    </div>

    <!-- 第三行六边形和内部元素 -->
    <!-- 六边形容器7 -->
    <div class="hexagon-container-7">
        <img src="https://sfile.chatglm.cn/chatglm4/2152e34c-6494-4000-88b6-ded0308a5527.png"
             alt="六边形图标7">
    </div>

    <!-- 摄像头结构元素 -->
    <div class="webcam-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/d3e33edc-9625-4576-8d55-524e2ae382b5.png"
             alt="摄像头结构图标">
    </div>

    <!-- 六边形容器8 -->
    <div class="hexagon-container-8">
        <img src="https://sfile.chatglm.cn/chatglm4/bea89be6-7ba4-44fc-860b-e095b1a3dca3.png"
             alt="六边形图标8">
    </div>

    <!-- 警告结构元素 -->
    <div class="warning-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/fe346dbd-91a8-48a1-8135-14c51eebbb7a.png"
             alt="警告结构图标">
    </div>

    <!-- 六边形容器9 -->
    <div class="hexagon-container-9">
        <img src="https://sfile.chatglm.cn/chatglm4/53c40ed0-4884-45f4-a279-9565f6513082.png"
             alt="六边形图标9">
    </div>

    <!-- 平衡结构元素 -->
    <div class="balance-structure">
        <img src="https://sfile.chatglm.cn/chatglm4/ec861d58-56a8-4373-90bc-f9d0c5cb7d03.png"
             alt="平衡结构图标">
    </div>

<script>
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', function () {
        const container = document.querySelector('.main-container');
        container.style.opacity = '0';
        container.style.transform = 'scale(0.95)';

        setTimeout(() => {
            container.style.transition = 'all 1s ease-out';
            container.style.opacity = '1';
            container.style.transform = 'scale(1)';
        }, 100);

        // 为所有图片添加错误处理
        const images = document.querySelectorAll('img');
        images.forEach(img => {
            img.addEventListener('error', function () {
                this.style.display = 'none';
                const placeholder = document.createElement('div');
                placeholder.style.cssText = `
                        width: ${this.offsetWidth}px;
                        height: ${this.offsetHeight}px;
                        background: rgba(135, 206, 235, 0.1);
                        border: 1px dashed #87ceeb;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #87ceeb;
                        font-size: 10px;
                        border-radius: 2px;
                    `;
                placeholder.textContent = '图片';
                this.parentNode.insertBefore(placeholder, this);
            });
        });

        // 关闭按钮功能
        const closeIcon = document.querySelector('.close-icon');
        closeIcon.addEventListener('click', function () {
            container.style.transition = 'all 0.5s ease-in';
            container.style.opacity = '0';
            container.style.transform = 'scale(0.9)';
            setTimeout(() => {
                if (confirm('确定要关闭看板吗？')) {
                    container.style.display = 'none';
                } else {
                    container.style.transition = 'all 0.5s ease-out';
                    container.style.opacity = '1';
                    container.style.transform = 'scale(1)';
                }
            }, 500);
        });

        // 导航图标点击效果
        const navIcons = document.querySelectorAll('[class^="nav-icon-"]');
        navIcons.forEach((icon, index) => {
            icon.addEventListener('click', function () {
                this.style.animation = 'bounce 0.5s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
                console.log(`导航图标 ${index + 1} 被点击`);
            });
        });

        // 小图标点击效果
        const smallIcons = document.querySelectorAll('[class^="small-icon-"]');
        smallIcons.forEach((icon, index) => {
            icon.addEventListener('click', function () {
                this.style.animation = 'pulse 0.5s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
                console.log(`小图标 ${index + 1} 被点击`);
            });
        });

        // 新图标点击效果
        const newIcons = document.querySelectorAll('[class^="new-icon-"]');
        newIcons.forEach((icon, index) => {
            icon.addEventListener('click', function () {
                this.style.animation = 'newIconPulse 0.6s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 600);
                console.log(`新图标 ${index + 1} 被点击`);
                
                // 添加涟漪效果
                const ripple = document.createElement('div');
                ripple.style.cssText = `
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 0;
                    height: 0;
                    border-radius: 50%;
                    background: rgba(129, 217, 230, 0.6);
                    transform: translate(-50%, -50%);
                    transition: all 0.6s ease-out;
                    z-index: 100;
                `;
                this.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.style.width = '60px';
                    ripple.style.height = '60px';
                    ripple.style.opacity = '0';
                }, 10);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        });

        // 文本标签点击效果
        const textLabels = document.querySelectorAll('[class^="text-label-group-"]');
        textLabels.forEach((label, index) => {
            label.addEventListener('click', function () {
                this.style.animation = 'textGlow 0.6s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 600);
                console.log(`文本标签 ${index + 1} 被点击`);
                
                // 添加文字发光效果
                const isYellow = this.style.color.includes('238,213,65');
                if (isYellow) {
                    this.style.textShadow = '0 0 15px rgba(238, 213, 65, 0.8)';
                    setTimeout(() => {
                        this.style.textShadow = '0 0 5px rgba(238, 213, 65, 0.3)';
                    }, 600);
                } else {
                    this.style.textShadow = '0 0 12px rgba(129, 217, 230, 0.8)';
                    setTimeout(() => {
                        this.style.textShadow = '0 0 3px rgba(129, 217, 230, 0.3)';
                    }, 600);
                }
            });
        });

        // 第一行元素点击效果
        const hexagonContainer = document.querySelector('.hexagon-container');
        hexagonContainer.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器1被点击');
        });

        const treeStructure = document.querySelector('.tree-structure');
        treeStructure.addEventListener('click', function () {
            this.style.animation = 'treePulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('树状结构1被点击');
        });

        const hexagonContainer2 = document.querySelector('.hexagon-container-2');
        hexagonContainer2.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器2被点击');
        });

        const friendsStructure = document.querySelector('.friends-structure');
        friendsStructure.addEventListener('click', function () {
            this.style.animation = 'friendsPulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('朋友结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 20px rgba(129, 217, 230, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        const hexagonContainer3 = document.querySelector('.hexagon-container-3');
        hexagonContainer3.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器3被点击');
        });

        const managerStructure = document.querySelector('.manager-structure');
        managerStructure.addEventListener('click', function () {
            this.style.animation = 'managerPulse 0.7s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 700);
            console.log('管理结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 25px rgba(129, 217, 230, 0.9)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 700);
        });

        // 第二行元素点击效果
        const hexagonContainer4 = document.querySelector('.hexagon-container-4');
        hexagonContainer4.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器4被点击');
        });

        const clockStructure = document.querySelector('.clock-structure');
        clockStructure.addEventListener('click', function () {
            this.style.animation = 'clockPulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('时钟结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 20px rgba(129, 217, 230, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        const hexagonContainer5 = document.querySelector('.hexagon-container-5');
        hexagonContainer5.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器5被点击');
        });

        const todoStructure = document.querySelector('.todo-structure');
        todoStructure.addEventListener('click', function () {
            this.style.animation = 'todoPulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('待办结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 20px rgba(129, 217, 230, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        const hexagonContainer6 = document.querySelector('.hexagon-container-6');
        hexagonContainer6.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器6被点击');
        });

        const taxiStructure = document.querySelector('.taxi-structure');
        taxiStructure.addEventListener('click', function () {
            this.style.animation = 'taxiPulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('出租车结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 20px rgba(129, 217, 230, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        // 第三行元素点击效果
        const hexagonContainer7 = document.querySelector('.hexagon-container-7');
        hexagonContainer7.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器7被点击');
        });

        const webcamStructure = document.querySelector('.webcam-structure');
        webcamStructure.addEventListener('click', function () {
            this.style.animation = 'webcamPulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('摄像头结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 20px rgba(129, 217, 230, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        const hexagonContainer8 = document.querySelector('.hexagon-container-8');
        hexagonContainer8.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器8被点击');
        });

        const warningStructure = document.querySelector('.warning-structure');
        warningStructure.addEventListener('click', function () {
            this.style.animation = 'warningPulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('警告结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 25px rgba(255, 100, 100, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        const hexagonContainer9 = document.querySelector('.hexagon-container-9');
        hexagonContainer9.addEventListener('click', function () {
            this.style.animation = 'hexagonRotate 0.8s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 800);
            console.log('六边形容器9被点击');
        });

        const balanceStructure = document.querySelector('.balance-structure');
        balanceStructure.addEventListener('click', function () {
            this.style.animation = 'balancePulse 0.6s ease';
            setTimeout(() => {
                this.style.animation = '';
            }, 600);
            console.log('平衡结构被点击');
            
            // 添加特殊发光效果
            this.style.boxShadow = '0 0 20px rgba(129, 217, 230, 0.8)';
            setTimeout(() => {
                this.style.boxShadow = '0 2px 8px rgba(129, 217, 230, 0.3)';
            }, 600);
        });

        // 矩形组件点击效果
        const rectComponents = document.querySelectorAll('[class^="rect-component-"]');
        rectComponents.forEach((component, index) => {
            component.addEventListener('click', function () {
                this.style.animation = 'pulse 0.5s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
                console.log(`矩形组件 ${index + 1} 被点击`);
            });
        });

        // 线条组件点击效果
        const lineComponents = document.querySelectorAll('[class^="line-component-"]');
        lineComponents.forEach((line, index) => {
            line.addEventListener('click', function () {
                this.style.animation = 'lineGlow 0.8s ease';
                setTimeout(() => {
                    this.style.animation = '';
                }, 800);
                console.log(`线条组件 ${index + 1} 被点击`);
            });
        });

        // 添加键盘快捷键
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                closeIcon.click();
            }
            // 数字键1-4控制导航图标
            if (e.key >= '1' && e.key <= '4') {
                const navIndex = parseInt(e.key) - 1;
                if (navIcons[navIndex]) {
                    navIcons[navIndex].click();
                }
            }
            // 数字键5-9控制小图标
            if (e.key >= '5' && e.key <= '9') {
                const smallIconIndex = parseInt(e.key) - 5;
                if (smallIcons[smallIconIndex]) {
                    smallIcons[smallIconIndex].click();
                }
            }
            // Q,W,E,R,T,Y,U控制新图标
            const keyMap = {'q': 0, 'w': 1, 'e': 2, 'r': 3, 't': 4, 'y': 5, 'u': 6};
            if (keyMap[e.key.toLowerCase()] !== undefined) {
                const newIconIndex = keyMap[e.key.toLowerCase()];
                if (newIcons[newIconIndex]) {
                    newIcons[newIconIndex].click();
                }
            }
            // 文本标签快捷键
            if (e.key >= 'a' && e.key <= 'j') {
                const textIndex = e.key.charCodeAt(0) - 97;
                if (textLabels[textIndex]) {
                    textLabels[textIndex].click();
                }
            }
            // 第一行快捷键
            if (e.key.toLowerCase() === 'k') {
                hexagonContainer.click();
            }
            if (e.key.toLowerCase() === 'l') {
                treeStructure.click();
            }
            if (e.key.toLowerCase() === 'm') {
                hexagonContainer2.click();
            }
            if (e.key.toLowerCase() === 'n') {
                friendsStructure.click();
            }
            if (e.key.toLowerCase() === 'o') {
                hexagonContainer3.click();
            }
            if (e.key.toLowerCase() === 'p') {
                managerStructure.click();
            }
            // 第二行快捷键
            if (e.key.toLowerCase() === 'q') {
                hexagonContainer4.click();
            }
            if (e.key.toLowerCase() === 'r') {
                clockStructure.click();
            }
            if (e.key.toLowerCase() === 's') {
                hexagonContainer5.click();
            }
            if (e.key.toLowerCase() === 't') {
                todoStructure.click();
            }
            if (e.key.toLowerCase() === 'u') {
                hexagonContainer6.click();
            }
            if (e.key.toLowerCase() === 'v') {
                taxiStructure.click();
            }
            // 第三行快捷键
            if (e.key.toLowerCase() === 'w') {
                hexagonContainer7.click();
            }
            if (e.key.toLowerCase() === 'x') {
                webcamStructure.click();
            }
            if (e.key.toLowerCase() === 'y') {
                hexagonContainer8.click();
            }
            if (e.key.toLowerCase() === 'z') {
                warningStructure.click();
            }
            if (e.key === '[') {
                hexagonContainer9.click();
            }
            if (e.key === ']') {
                balanceStructure.click();
            }
        });
    });

    // 添加动画样式
    const style = document.createElement('style');
    style.textContent = `
            @keyframes bounce {
                0%, 100% { transform: translateX(0); }
                25% { transform: translateX(-5px); }
                75% { transform: translateX(5px); }
            }
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
            @keyframes lineGlow {
                0% { opacity: 1; }
                50% { opacity: 0.3; box-shadow: 0 0 10px rgba(129,217,230,0.8); }
                100% { opacity: 1; }
            }
            @keyframes newIconPulse {
                0% { transform: scale(1); }
                25% { transform: scale(1.2) rotate(5deg); }
                50% { transform: scale(1.1) rotate(-5deg); }
                75% { transform: scale(1.15) rotate(3deg); }
                100% { transform: scale(1); }
            }
            @keyframes hexagonRotate {
                0% { transform: scale(1) rotate(0deg); }
                50% { transform: scale(1.2) rotate(180deg); }
                100% { transform: scale(1) rotate(360deg); }
            }
            @keyframes treePulse {
                0% { transform: scale(1); opacity: 1; }
                25% { transform: scale(1.3); opacity: 0.8; }
                50% { transform: scale(1.1); opacity: 1; }
                75% { transform: scale(1.2); opacity: 0.9; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes friendsPulse {
                0% { transform: scale(1); opacity: 1; }
                25% { transform: scale(1.4); opacity: 0.7; }
                50% { transform: scale(1.2); opacity: 1; }
                75% { transform: scale(1.3); opacity: 0.8; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes managerPulse {
                0% { transform: scale(1); opacity: 1; }
                25% { transform: scale(1.5); opacity: 0.6; }
                50% { transform: scale(1.3); opacity: 1; }
                75% { transform: scale(1.4); opacity: 0.7; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes clockPulse {
                0% { transform: scale(1) rotate(0deg); opacity: 1; }
                25% { transform: scale(1.3) rotate(90deg); opacity: 0.7; }
                50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
                75% { transform: scale(1.2) rotate(270deg); opacity: 0.8; }
                100% { transform: scale(1) rotate(360deg); opacity: 1; }
            }
            @keyframes todoPulse {
                0% { transform: scale(1); opacity: 1; }
                25% { transform: scale(1.4); opacity: 0.6; }
                50% { transform: scale(1.2); opacity: 1; }
                75% { transform: scale(1.3); opacity: 0.7; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes taxiPulse {
                0% { transform: scale(1) translateX(0); opacity: 1; }
                25% { transform: scale(1.3) translateX(3px); opacity: 0.7; }
                50% { transform: scale(1.1) translateX(0); opacity: 1; }
                75% { transform: scale(1.2) translateX(-3px); opacity: 0.8; }
                100% { transform: scale(1) translateX(0); opacity: 1; }
            }
            @keyframes webcamPulse {
                0% { transform: scale(1); opacity: 1; }
                25% { transform: scale(1.4); opacity: 0.6; }
                50% { transform: scale(1.2); opacity: 1; }
                75% { transform: scale(1.3); opacity: 0.7; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes warningPulse {
                0% { transform: scale(1); opacity: 1; }
                25% { transform: scale(1.5); opacity: 0.5; }
                50% { transform: scale(1.3); opacity: 1; }
                75% { transform: scale(1.4); opacity: 0.6; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes balancePulse {
                0% { transform: scale(1) rotate(0deg); opacity: 1; }
                25% { transform: scale(1.3) rotate(15deg); opacity: 0.7; }
                50% { transform: scale(1.1) rotate(-15deg); opacity: 1; }
                75% { transform: scale(1.2) rotate(10deg); opacity: 0.8; }
                100% { transform: scale(1) rotate(0deg); opacity: 1; }
            }
            @keyframes textGlow {
                0% { opacity: 1; transform: scale(1); }
                25% { opacity: 0.7; transform: scale(1.05); }
                50% { opacity: 1; transform: scale(1.1); }
                75% { opacity: 0.8; transform: scale(1.05); }
                100% { opacity: 1; transform: scale(1); }
            }
        `;
    document.head.appendChild(style);

    // 实时时间更新
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString('zh-CN');
    }

    setInterval(updateTime, 1000);
</script>
</body>
</html>
